<template>
	<view class="content">
		<view class="tag-name-container">
			<view v-for="(item, index) in allTags" :key="item.id" class="tag-item" :class="[item.seleted ? 'tag-item-seleted' : '']" @click="clickItem(item)">
				{{ item.tagName }}
			</view>
		</view>
		<view></view>
		<view class="btn-fix">
			<button class="bottombtn bottom-change-view" @click="save()">保存</button>
		</view>
		
	</view>
</template>

<script>
import { getAllTagList,allTag } from '@/constant/customer.js';
import { getServePlayTypeList, updateServePlayerTagInfo } from '@/constant/server.js';
import { errorToShow, successToShow } from '@/config/common.js';
export default {
	data() {
		return {
			allTags: [],
			serveTagList: [],
			saveType: 'regist',
			serverId: '',
			servePlayType: '1'
		};
	},
	created: function() {},
	onShow() {},
	onLoad(option) {
		// this.saveType = option.saveType;
		this.servePlayType = option.servePlayType;
		this.getTagList();
		console.log(option.serveTagList)
		if (option.serveTagList) {
			
			this.serveTagList = JSON.parse(option.serveTagList);
		}
	},
	methods: {
		async getTagList() {
			let res = await allTag({});
			let list=res.data
			const _that = this;
			list.forEach(item => {
				item.tagId = item.id;
				if (_that.serveTagList&&_that.serveTagList.length > 0) {
					const length = _that.serveTagList.filter(r => r.tagId == item.id).length;
					if (length > 0) {
						item.seleted = true;
					} else {
						item.seleted = false;
					}
				} else {
					item.seleted = false;
				}
			});
			this.allTags = list;
		},
		save() {
			var allSelectedTag = this.allTags.filter(item => item.seleted);
			if (allSelectedTag.length == 0) {
				errorToShow('请至少选择一个标签');
				return;
			}
			if (allSelectedTag.length > 10) {
				errorToShow('选中标签数量不能大于10');
				return;
			}
			this.$api.prePage().tagsList = allSelectedTag
				uni.navigateBack();
			// uni.navigateBack()
			// // 达人注册时使用
			// if (this.saveType == 'regist') {
			// 	var pages = getCurrentPages();
			// 	var prePage = pages[pages.length - 2]; //上个页面
			// 	prePage.allSelectedTag = allSelectedTag; //赋值
			// 	uni.navigateBack({
			// 		delta: 1
			// 	});
			// 	// 达人修改信息时使用
			// } else if (this.saveType == 'save') {
			// 	this.saveServePlayTag(allSelectedTag);
			// } else {
			// 	errorToShow('获取类型失败');
			// }
		},
		async saveServePlayTag(allSelectedTag) {
			let userInfo = JSON.parse(uni.getStorageSync('ServePlayer_UserInfo'));
			let paramData = {
				Id: userInfo.Id,
				ServeTagList: allSelectedTag
			};
			await updateServePlayerTagInfo(paramData);
			successToShow('保存成功', () => {
				userInfo.ServeTagList = allSelectedTag;
				uni.setStorageSync('ServePlayer_UserInfo', JSON.stringify(userInfo));
				uni.navigateBack();
			});
		},
		clickItem(item) {
			item.seleted = !item.seleted;
		}
	}
};
</script>
<style>
	@import "@/css/common.css";
</style>
<style lang="scss" scoped>
.content {
	overflow: hidden;
}

.tag-name-container {
	display: flex;
	flex-wrap: wrap;

	padding: 20rpx 30rpx;
	.tag-item {
		padding: 16rpx 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: $main-text-color-gray-33;
		background-color: #e6e6e6;
		font-size: $main-text-size-24;
	}
	.tag-item-seleted {
		padding: 16rpx 24rpx;
		border: 2rpx solid $main-text-color-main-orange;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: $main-text-color-main-orange;
		background-color: #ffffff;
	}
}

/* 如果最后一行是3个元素 */
// .tag-item:last-child:nth-child(4n-1) {
// 	margin-right: calc(23% + 4% / 3);
// }
/* 如果最后一行是2个元素 */
// .tag-item:last-child:nth-child(4n-2) {
// 	margin-right: calc(47% + 8% / 3);
// }

.bottombtn {
		margin: 0rpx auto;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		// color: $uni-text-color-inverse;
		// font-size: $uni-font-size-lg - 2rpx;
		// background-color: $theme-color;
		// background: linear-gradient(270deg, #783CF9 0%, #FD83C8 100%);
		border-radius: 80rpx;
		color:#fff
	}
</style>
